<template>
	<!-- 设计优化 -->
	<div class="optimization">
		<!-- 头部 -->
		<div class="optimizationTop">
			<div class="optimization_logo">
				<img src="../../static/image/16557845140690910146.png" alt="">
			</div>
			<div class="optimization_title">
				<div class="title_left">设计优化订单</div>
				<div class="title_right">
					<div class="title_right-left" @click="infodiv">
						<div>
							<el-avatar size="small" :src="this.address"></el-avatar>
						</div>
						<div>{{this.username}}</div>
					</div>
					<div class="line"></div>
					<div class="loout" @click="lyout">退出</div>
				</div>
			</div>
			<div class="active">
				<img src="../../static/image/16557845125699707747.png" alt="">
			</div>
		</div>
		<!-- 左侧导航栏 -->
		<div class="left">
			<ul>
				<li class="activeLi">设计优化</li>
				<li @click="shenhe()">审核/合同签约</li>
				<li @click="shenheziliao()">结算审核资料</li>
				<li @click="mybaogao()">我的报告</li>
			</ul>

		</div>
		<ul class="leftIcon">
			<li class="activeIconLi">
				<img src="../../static/image/16557845125746053644.png" alt="">
			</li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<!-- 内容部分 -->
		<div class="content">
			<div class="con_information">
				<!-- 订单信息 -->
				<div class="con_information_top">
					<span>
						<img src="../../static/image/16557845125786128394.png" alt="">
					</span>
					<span>订单信息</span>
				</div>
				<div v-if="!datalist.designTypeName">
					<el-empty description="无数据" :image-size="50"></el-empty>
				</div>
				<div class="con_information_text" v-else>
					<ul>
						<li>订单号：{{datalist.ordersNumber}}</li>
						<li>类型：{{datalist.designTypeName}}</li>
						<li>下单时间：{{datalist.ordersTime}}</li>
						<li>下单金额：<span style="color: rgb(254, 100, 26);">￥{{datalist.payableMoney}}.00</span></li>
						<li>备注：{{datalist.remark}}</li>
					</ul>
				</div>
			</div>
			<div class="con_Feedback">
				<!-- 资料审核意见反馈 -->
				<div class="con_information_top">
					<span>
						<img src="../../static/image/16557845125786128394.png" alt="">
					</span>
					<span>资料审核意见反馈</span>
				</div>
				<div v-if="datalist.opinions ==''">
					<el-empty description="无数据"></el-empty>
				</div>
				<div class="Feedback_list" v-else>
					<div class="" v-for="(item,i) in datalist.opinions">
						<span>{{item.opinionRemarks}}</span>
					</div>
				</div>
			</div>
			<div class="con_desc">
				<div class="desc_drawing">
					<div class="drawing_title">
						<div class="con_information_top">
							<span>
								<img src="../../static/image/16557845125786128394.png" alt="">
							</span>
							<span>设计图纸</span>
						</div>
						<div style="display:flex">
							<div class="drawing_btn" @click="addUser('sjtz')">参考模版</div>
							<el-upload class="upload-demo" ref="upload2" :action="this.$api+'/app3/upload/uploadOneWithName'"
						multiple :on-change="success2" :auto-upload="false" :show-file-list="false"
						:on-success="handleSU" :limit="3" :on-exceed="handleExceed">
						<div>点击上传</div>
					</el-upload>
						</div>
					</div>
					
					<div class="drawing_Table">
						<el-table v-if="tableData.length>0" :data="tableData" stripe style="width: 100%">
							<el-table-column prop="fullName" label="文件名称">
							</el-table-column>
							<el-table-column label="操作" width="120">
								<template slot-scope="scope">
									<el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text"
										size="small">
										删除
									</el-button>
									<el-button
										@click.native.prevent="downloadFileUrl(tableData[scope.$index].path, tableData[scope.$index].fullName)"
										type="text" size="small">
										下载

									</el-button>
								</template>
							</el-table-column>
						</el-table>
						<div v-else>
					     <el-empty description="无数据" :image-size="50"></el-empty>
				        </div>
					</div>
				</div>
				<div class="desc_demand">
					<!-- 需求说明 -->
					<div class="drawing_title">
						<div class="con_information_top">
							<span>
								<img src="../../static/image/16557845125786128394.png" alt="">
							</span>
							<span>设计需求说明</span>
						</div>
						<div >
						<div style="display:flex">
							<div class="drawing_btn" @click="addUser('sjxqsm')">参考模版</div>
							<el-upload class="upload-demo" ref="upload" :action="this.$api+'/app3/upload/uploadOneWithName'"
						multiple :on-change="success" :auto-upload="false" :show-file-list="false"
						:on-success="handleSU2" :limit="3" :on-exceed="handleExceed">
						 <div>点击上传</div>
						
					</el-upload>
						</div>
						
						</div>
					</div>
					
					<div class="drawing_Table">
						<el-table v-if="tableDataXQ.length>0" :data="tableDataXQ" stripe style="width: 100%">
							<el-table-column prop="fullName" label="文件名称">
							</el-table-column>
							<el-table-column label="操作" width="120">
								<template slot-scope="scope2">
									<el-button @click.native.prevent="deleteRow2(scope2.$index, tableDataXQ)" type="text"
										size="small">
										删除
									</el-button>
									<el-button @click.native.prevent="downloadFileUrl(tableDataXQ[scope2.$index].path, tableDataXQ[scope2.$index].fullName)" type="text"
										size="small">
										下载
										
									</el-button>
								</template>
							</el-table-column>
						</el-table>
						<div v-else>
					     <el-empty description="无数据" :image-size="50"></el-empty>
				        </div>
						<div class="text_84">注：您可上传.doc ,.pdf,rp,等。</div>
					</div>
				</div>
			</div>

			<el-dialog title="参考模版" :visible.sync="dialogTableVisible2" center :append-to-body='true'
				:lock-scroll="false" width="50%">
				<div v-html="content">
			    </div>
				
			</el-dialog>
			<div class="con_btn">
				<!-- 按钮 -->
				<div class="cencel" @click="cancel">取消</div>
				<div class="submit" @click="sure">确认</div>
			</div>
			<el-dialog title="" :visible.sync="dialogTableVisible" center :append-to-body='true' :lock-scroll="false"
				width="40%">
				<div class="info">
					<div class="infopic">
						<img :src="this.address" alt="">
					</div>
					<div class="name" style="margin-top: 10px;color: #333;">{{this.username}}</div>
				</div>
				<div class="img_6">
					<div @click="ZHinfo">
						<el-dropdown-item style="color: #1C62F9;">账号信息</el-dropdown-item>
					</div>
					<div @click="switchome">
						<el-dropdown-item style="color: #fff;">切换房屋</el-dropdown-item>
					</div>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
export default {
	name: 'optimization',
	data() {
		
		return {
			content:'',
			tableData: [],
			tableDataXQ: [],
			dialogTableVisible2: false,
			dialogTableVisible: false,
			address: '',
			username: '',
			datalist: '',
			fileList: [],
			fileListSG: [],
			fileList3: [],
			newfileList: [],
			newfileList2: [],
			newfileList3: []
		}
	},
	beforeCreate() {
		document.querySelector('body').setAttribute('style', 'background-color:#f6f7f9')
	},
	beforeDestroy() {
		document.querySelector('body').removeAttribute('style')
	},
	created() {
		this.address = localStorage.getItem('address');
		this.username = localStorage.getItem('name');
		this.getdata()
	},
	methods: {
		addUser(flag) {
			console.log(22222);
				this.$axios({
					method: 'get',
					url: this.$api+'/app1/article/identification?identification='+flag,
					headers: {
						token: localStorage.getItem('token')
					}
				}).then(r=>{
					
					if(r.data.code==200)
					{
                        this.content=r.data.data.articleContent;
						this.dialogTableVisible2 = true;
					}
					
				})
				 //默认页面不显示为false,点击按钮将这个属性变成true
			},
		downloadFileUrl(res, fileName) {
			if (!res) {
				return
			}
			if (window.navigator.msSaveBlob) {  // IE以及IE内核的浏览器
				try {
					window.navigator.msSaveBlob(res, fileName)  // res为接口返回数据，这里请求的时候已经处理了，如果没处理需要在此之前自行处理var data = new Blob([res.data]) 注意这里需要是数组形式的,fileName就是下载之后的文件名
					// window.navigator.msSaveOrOpenBlob(res, fileName);  //此方法类似上面的方法，区别可自行百度
				} catch (e) {
					console.log(e)
				}
			} else {
				let url = window.URL.createObjectURL(new Blob([res]))
				let link = document.createElement('a')
				link.style.display = 'none'
				link.href = url
				link.setAttribute('download', fileName)// 文件名
				document.body.appendChild(link)
				link.click()
				document.body.removeChild(link) // 下载完成移除元素
				window.URL.revokeObjectURL(url) // 释放掉blob对象
			}

			console.log(3333);
			//   const a = document.createElement('a');
			//     a.setAttribute('href', url);
			//     a.setAttribute('download', fileName);
			//     a.click();



		},

		download2(index, item) {
			let url = item[index].path;
			if (url == '' || url == null) {
				this.$message({
					type: 'info',
					message: '下载失败'
				});
				return;
			}
			window.open(url)
		},
	
		sure() {
			let designDrawings=[]; 
			let designIllustrates=[]; 
			this.tableData.map(item=>{
				let id='';
				if(item.id)
					{
                      id=item.id
					}
				designDrawings.push(
					{
					id:id,
						path:item.path,
						fullName:item.fullName	
					})
			});
			this.tableDataXQ.map(item=>{
				let id='';
				if(item.id)
					{
                      id=item.id
					}
					designIllustrates.push(
					{
					id:id,
						path:item.path,
						fullName:item.fullName	
					})
			});
			let design = {
				designId: this.datalist.designId,
				orderId: this.datalist.ordersId,
				designDrawings: designDrawings,
				designIllustrates: designIllustrates
			}
			// 确定
			this.$axios({
				method: 'post',
				url: this.$api + '/app2/design/saveOrderFile',
				data: design,
				headers: {
					token: localStorage.getItem('token')
				}
			}).then(res => {
				if (res.data.code == 200) {
					this.$message({
						type: 'info',
						message: '上传成功'
					});

				} else {
					this.$message({
						type: 'info',
						message: res.msg
					});
				}
			})
		},
		handleSU(res) {
			console.log(res, 'res,handleSU')

			this.tableData.push({ fullName: res.data.name, path: res.data.path })
			console.log(this.tableData, 'this.tableData')
		},
		handle3(res) {
			console.log(res, 'res,handle3')
			this.tableData.push(res.data)
			console.log(this.newfileList3, 'this.newfileList3')
		},
		handleSU2(res) {
		
			this.tableDataXQ.push({ fullName: res.data.name, path: res.data.path })
			console.log(this.tableDataXQ, 'this.tableDataXQ')
		},
		success3(file, fileList) {
			this.$refs.upload3.submit();
			this.$message({
				type: 'success',
				message: '上传成功'
			});
		},
		success2(file, fileList) {
			this.$refs.upload2.submit();
			
			// console.log('上传文件11');
			// this.getdata()
		},
		success(file, fileList) {
			this.$refs.upload.submit();
			
		},
		handleExceed(files, fileList) {
			this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
		},
		// 删除
		deleteRow(index, table) {
			// console.log(index,'index')
			// console.log(table,'table')
			if (this.tableData[index].id) {
				this.$axios({
					method: 'post',
					url: this.$api + '/app2/design/delFile',
					data: {
						delType: '1',
						fileId: this.tableData[index].id,
						designId: this.datalist.designId
					},
					headers: {
						token: localStorage.getItem('token')
					}
				}).then(res => {
					if (res.data.code == 200) {
						this.tableData.splice(index, 1)
						this.$message({
							type: 'success',
							message: '删除成功'
						});

					} else {
						this.$message({
							type: 'info',
							message: res.data.msg
						});
					}
				})
			} else {
				this.tableData.splice(index, 1)
				this.$message({
					type: 'success',
					message: '删除成功'
				});
			}

		},
		deleteRow2(index, table) {
			// console.log(this.tableDataXQ[index],'index')
			if(this.tableDataXQ[index].id)
			{
				this.$axios({
				method: 'post',
				url: this.$api + '/app2/design/delFile',
				data: {
					delType: '2',
					fileId: this.tableDataXQ[index].id,
					designId: this.datalist.designId
				},
				headers: {
					token: localStorage.getItem('token')
				}
			}).then(res => {
				if (res.data.code == 200) {
					this.$message({
						type: 'success',
						message: '删除成功'
					});

				} else {
					this.$message({
						type: 'info',
						message: res.data.msg
					});
				}
			})
			}else{
				this.tableDataXQ.splice(index,1)
			}
			
		},
		getdata() {
			// 设计优化获取
			this.$axios({
				method: 'post',
				url: this.$api + '/app2/design/queryOrder',
				data: {},
				headers: {
					token: localStorage.getItem('token')
				}
			}).then(res => {
				console.log(res.data, 'asduhasda')
				if (res.data.code == 200) {
					this.datalist = res.data.data;
					console.log(String(res.data.data.designIllustrates) != 'null');
					console.log(res.data.data.designDrawings);
					 this.tableDataXQ=String(res.data.data.designIllustrates) !='null'?res.data.data.designIllustrates:[];
				 this.tableData=String(res.data.data.designDrawings) !='null'?res.data.data.designDrawings:[];
				} else {
					this.$message({
						type: 'info',
						message: res.data.msg
					});
				}
			})
		},
		switchome() {
			this.$router.push({
				path: '/switchome'
			})
			this.dialogTableVisible = false;
		},
		ZHinfo() {
			this.$router.push({
				path: '/ZHinfo'
			}) // 带
			this.dialogTableVisible = false;
		},
		infodiv() {
			this.dialogTableVisible = true;
		},
		shenhe() {
			this.$router.push('/examine')
		},
		shenheziliao() {
			this.$router.push('/settlement')
		},
		mybaogao() {
			this.$router.push('/report')
		},
		getinfo() {

		},
		cancel()
		{
			this.getdata();
			this.$message({
						type: 'success',
						message: '取消成功'
					});
		},
		lyout() {
			// 推出
			this.$axios({
				method: 'post',
				url: this.$api + '/app3/consumer/quit',
				data: {},
				headers: {
					token: localStorage.getItem('token')
				}
			}).then(res => {
				console.log(res.data.data.code)
				if (res.data.data.code == 200) {
					this.$message({
						type: 'success',
						message: '退出成功！'
					});
					var storage = window.localStorage;
					storage.clear();
					this.$router.push('/')
				} else {
					var storage = window.localStorage;
					storage.clear();
					this.$router.push('/')

				}

				console.log(res)
			})
		}
	}
}
</script>


<style scoped>
.info {}

.info .name {
	text-align: center;
	line-height: 30px;
	font-size: 14px;
}

.infopic {
	width: 30%;
	margin: 0 auto;
}

.infopic img {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	margin-left: 30%;
	z-index: -1;
}

.infopic div {
	background-color: #1C62F9;
	border-radius: 18px;
	width: 80px;
	height: 20px;
	color: #fff;
	text-align: center;
	position: absolute;
	top: 43%;
	left: 43%;
}
.upload-demo{
	width: 88px;
height: 32px;
line-height: 32px;
text-align: center;
font-size: 13px;
background: #1C62F9;
opacity: 1;
color:#ffffff;
border-radius: 4px;
}
.img_6 {
	display: flex;
	justify-content: space-around;
	border-top: 1px solid #eee;
	padding-top: 20px;
}

.img_6 div {
	width: 30%;

}

.img_6 div:first-child {
	border: 1px solid #1C62F9;
	border-radius: 18px;

	text-align: center;
}

.img_6 div:last-child {
	background-color: #1C62F9;
	border-radius: 18px;
	color: #fff;
	text-align: center;
}

.text_info {
	width: 100px;
	height: 80px;
	border: 1px solid red;
}

ul li {
	list-style: none;
	color: #fff;
	padding: 0;
	margin: 0;
}

.optimizationTop {
	width: 100%;
	height: 36px;
	background-color: rgba(29, 106, 255, 1);
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	display: flex;

}

.el-button--text {
	color: #333 !important;
}

.optimization_logo {
	width: 55px;
	height: 20px;
	margin-top: 6px;
	margin-left: 30px;
}

.optimization_logo img {
	width: 100%;
	height: 100%;
}

.optimization_title {
	width: 89%;
	color: #fff;
	margin-left: 2.8%;
	display: flex;
	line-height: 36px;
	justify-content: space-between;
}

.title_left {
	width: 20%;
	font-size: 14px;
	text-align: center;
}

.title_right-left {
	display: flex;
	font-size: 14px;
	/* width: 60px; */
	justify-content: space-between;
}

.el-avatar--small {
	margin-top: 10%;
	margin-right: 5px;
}

.title_right {
	display: flex;
	font-size: 14px;
}

.line {
	width: 1px;
	height: 10px;
	background-color: #fff;
	margin-top: 13px;
	margin-left: 20px;
}

.loout {
	width: 70px;
	text-align: center;
}

.active {
	position: absolute;
	top: 21px;
	left: 15%;
	width: 50px;
	height: 3px;
}

.active img {
	width: 100%;
	height: 100%;
}

/*  */
.left {
	position: absolute;
	left: 0;
	top: 0;
	width: 120px;
	height: 100%;
	background-color: rgb(0, 14, 38);
	z-index: 9;
}

.left ul {
	margin-top: 55px;
	padding-left: 0;
	text-align: center;
}

.left ul li {
	text-align: center;
	font-size: 14px;
	height: 40px;
	line-height: 40px;
}

.activeLi {
	background-color: rgb(7, 36, 90);
}

.leftIcon {
	position: absolute;
	top: 5.5%;
	left: -39px;
}

.activeIconLi {
	width: 5px;
	height: 20px;
}

.activeIconLi img {
	width: 100%;
	height: 100%;
}

/*  */
.content {
	width: 90%;
	height: 85%;
	position: absolute;
	top: 7%;
	left: 8%;
}

.con_information {
	background-color: #fff;
	width: 99%;
	padding: 10px;
	border-radius: 8px;
}

.con_information_top {
	font-size: 18px;
	margin-top: 10px;
}

.con_information_top span:first-child {
	width: 20px;
	height: 20px;
}

.con_information_top img {
	width: 18px;
	height: 10px;
}

.con_information_text {
	margin-top: 15px;
}

.con_information_text ul {
	display: flex;
	padding-left: 12px;
}

.con_information_text ul li {
	list-style: none;
	width: 30%;
	color: #333;
	font-size: 15px;
}

.con_Feedback {
	padding: 10px;
	margin-top: 20px;
	background-color: #fff;
	border-radius: 8px;
}

.Feedback_list {
	width: 97%;
	margin: 0 auto;
	border: 1px solid rgb(29, 1.6, 255);
	border-radius: 8px;
	height: 80px;
	margin-top: 20px;
	background-color: rgb(244, 247, 255);
	font-size: 12px;
	padding: 0 10px;
}

.Feedback_list div {
	height: 40px;
	line-height: 40px;
}

.Feedback_list div {
	border-bottom: 1px solid #1d6aff1f;
}

.Feedback_list span {
	color: rgb(29, 106, 255);
}

.con_desc {
	display: flex;
	justify-content: space-between;
	margin-top: 15px;
}

.desc_drawing {
	width: 48%;
	background-color: #fff;
	padding: 0 10px;
	
}

.drawing_title {
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
}

.desc_demand {
	width: 48%;
	background-color: #fff;
	padding: 0 10px;
}

.drawing_btn {
	display: flex;
	height: 32px;
	background: rgba(29,106,255,0.1);
	font-weight: 400;
	padding: 0 10px;
	margin-right: 20px;
	font-size: 14px;
color: #1D6AFF;
justify-content: center;
align-items: center;
}

.drawing_btn div {
	/* width: 80px; */
	padding: 0 10px;
	height: 30px;
	border: 1px solid #eee;
	font-size: 14px;
	text-align: center;
	line-height: 30px;
	border-radius: 4px;
}

.drawing_btn div:first-child {
	background-color: rgb(244, 247, 255);
	color: rgb(29, 106, 255);
	margin-right: 15px;
}

.drawing_btn div:last-child {
	background-color: #1c62f9;
	color: #fff;
}

.drawing_Table {
	width: 90%;
	margin: 20px auto;
}

.text_84 {
	color: #ff371d;
	font-size: 0.75rem;
	font-family: '.AppleSystemUIFont';
	height: 40px;
	line-height: 40px;
}

.con_btn {
	display: flex;
	justify-content: space-between;
	width: 40%;
	margin: 0 auto;
	margin-top: 50px;
	font-size: 1rem;
}

.cencel {
	width: 250px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: 38px;
	border: 1px solid #eee;
	background-color: #fff;
	cursor: pointer;
}

.submit {
	width: 250px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: 38px;
	background-color: #1d6aff;
	color: #fff;
	cursor: pointer;
}
</style>
